<script setup>
import { EVALUATION_MAP } from '@/configs/evaluation'
import { nameMask } from '@/utils'

const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
})

const levelInfo = computed(() => {
  const r = props.info?.rating || 5
  return EVALUATION_MAP.get(r)
})
</script>

<template>
  <view class="history-evaluation-item">
    <view class="flex items-stretch">
      <image
        class="size-64rpx rounded-full mr-16rpx"
        src="@/static/logo.png"
      ></image>
      <view class="flex flex-col justify-between">
        <view class="info-title">{{ nameMask(info?.userId_dictText) }}</view>
        <view class="info-desc">{{ info?.createTime }}</view>
      </view>
    </view>
    <view class="flex flex-col items-center justify-center w-100rpx">
      <image
        class="size-40rpx mb-8rpx"
        :src="levelInfo.iconSrc"
      ></image>
      <view class="evaluation-text">{{ levelInfo.label }}</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.history-evaluation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 130rpx;

  .info-title {
    font-size: 28rpx;
    color: $uni-text-color;
  }

  .info-desc {
    font-size: 24rpx;
    color: $uni-text-color-grey;
  }

  .evaluation-text {
    font-size: 24rpx;
    color: $uni-text-color;
  }
}
</style>
